<template>
  <div>
    <el-card class="topCard">
      <span>编号: </span>
      <el-input placeholder="请输入编号"></el-input>
      <span>类型: </span>
      <el-input placeholder="请输入类型"></el-input>
      <el-button type="primary">查询</el-button>
    </el-card>

    <el-card class="bottomCard">
      <span>实验室管理</span>
      <!-- 新建实验室表单 -->
      <el-button type="primary" class="addDevice" @click="showNewDialog">+ 新建</el-button>
      <el-dialog title="添加实验室" :visible.sync="addDialogFormVisible">
        <el-form :model="form">
          <el-form-item label="编号" :label-width="formLabelWidth">
            <el-input v-model="form.id" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="类型" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input v-model="form.other" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addDialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false" >确 定</el-button>
        </div>
      </el-dialog>

      <!-- 表格 -->
      <el-table :data="roomDate" border style="width: 100%">
        <el-table-column label="#" type="index"> </el-table-column>
        <el-table-column prop="id" label="实验室编号"> </el-table-column>
        <el-table-column prop="type" label="类型"> </el-table-column>
        <el-table-column prop="remarks" label="备注"> </el-table-column>
        <el-table-column label="操作">
          <i class="el-icon-view blue"></i>
          <i class="el-icon-edit-outline green"></i>
          <i class="el-icon-delete red"></i>
        </el-table-column>
      </el-table>

      <!-- 页码 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="4"
        :page-size="2"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Room",
  data() {
    return {
      roomDate: [
        {
          id: "A01",
          type: "化学实验室",
        },
      ],

        addDialogFormVisible: false,
        form: {
          id: '',
          name: '',
          other:'',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px'
      };
    },

    methods: {
      showNewDialog() {
        this.addDialogFormVisible = true;
      }
    }
};
</script>

<style scoped>
.topCard {
  height: 80px;
}

.topCard .el-input {
  width: 250px;
  height: 50px;
  margin-right: 150px;
}

.bottomCard span {
  font-size: 20px;
}

.addDevice {
  float: right;
  width: 119px;
  height: 40px;
}

.el-table {
  margin-top: 30px;
}

.el-table-column {
  height: 67px;
}

.el-table i {
  font-size: 20px;
  margin-right: 50px;
}

.el-pagination {
  float: right;
  margin: 20px 0 20px 0;
}
</style>